<template>
  <!-- hidden PageHeaderWrapper title demo -->
  <page-header-wrapper :title="false">
    <a-card
      :body-style="{ padding: '24px 32px' }"
      :bordered="false"
      :tabList="operationTabList"
      :activeTabKey="operationActiveTabKey"
      @tabChange="
        (key) => {
          this.operationActiveTabKey = key
          if(key == '0'){
            this.getExpensesList()
          }else if(key == '1'){
            this.getIncomeList()
          }
        }
      "
    >
      <a-form @submit="handleSubmit" :form="form" v-if="operationActiveTabKey == '1'">
        <a-form-item
          label="收入类型"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-select v-decorator="['incomeExpensesTypeId']" placeholder="请选择">
            <a-select-option :value="i.id" v-for="i in incomeTypeList" :key="i.id">{{ i.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="金额"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-input addonAfter="元" placeholder="请输入金额" v-decorator="['amount', { rules: [{ required: true, message: '请输入金额' }]}]" />
        </a-form-item>
        <a-form-item
          label="记账日期"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-date-picker v-decorator="['orderDate',{ initialValue:this.toDays,}]" style="width: 100%" valueFormat="YYYY-MM-DD"/>
        </a-form-item>
        <a-form-item
          label="备注"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-textarea rows="2" v-decorator="['memo']" placeholder="请输入备注" />
        </a-form-item>
        <a-form-item
          label="选择会员"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-space >
            <a-input-search
              v-model="value"
              placeholder="请输入手机号或者会员卡号"
              enter-button
              @change="handleChange"
              @search="onSearch"
            />
            <a-input v-show="false" v-decorator="['memId']"/>
            <a-button type="primary" @click="handAddMember()">添加</a-button>
            <a-button type="primary" v-if="JSON.stringify(this.memberDetail) !== '{}'" @click="cancel()">取消</a-button>
          </a-space>
        </a-form-item>
        <a-form-item
          label="会员详情"
          v-if="JSON.stringify(this.memberDetail) !== '{}'"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-descriptions>
            <a-descriptions-item label="会员名称" :span="3">{{ memberDetail.name }}</a-descriptions-item>
            <a-descriptions-item label="会员电话" :span="3">{{ memberDetail.phone }}</a-descriptions-item>
            <a-descriptions-item label="会员卡号" :span="3">{{ memberDetail.cardNo }}</a-descriptions-item>
            <a-descriptions-item label="会员积分" :span="3">{{ memberDetail.hisBigintegral }}</a-descriptions-item>
          </a-descriptions>
        </a-form-item>
        <a-divider />
        <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
          <a-button htmlType="submit" type="primary" :loading="loading" icon="check">保存</a-button>
        </a-form-item>
      </a-form>
      <a-form @submit="handleZcSubmit" :form="zcForm" v-if="operationActiveTabKey == '0'">
        <a-form-item
          label="支出类型"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-select v-decorator="['incomeExpensesTypeId']" placeholder="请选择">
            <a-select-option :value="i.id" v-for="i in expensesTypeList" :key="i.id">{{ i.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="金额"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-input addonAfter="元" placeholder="请输入金额" v-decorator="['amount', { rules: [{ required: true, message: '请输入金额' }]}]" />
        </a-form-item>
        <a-form-item
          label="记账账户"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-select v-decorator="['stAccountId']" placeholder="请选择">
            <a-select-option :value="i.id" v-for="i in option" :key="i.id">{{ i.accName }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="记账日期"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-date-picker v-decorator="['orderDate',{ initialValue:this.toDays,}]" style="width: 100%" valueFormat="YYYY-MM-DD"/>
        </a-form-item>
        <a-form-item
          label="备注"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-textarea rows="2" v-decorator="['memo']" placeholder="请输入备注" />
        </a-form-item>
        <a-divider />
        <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
          <a-button htmlType="submit" type="primary" :loading="loading" icon="check">保存</a-button>
        </a-form-item>
      </a-form>
      <a-form @submit="handleSykfSubmit" :form="syfkForm" v-if="operationActiveTabKey == '2'">
        <a-form-item
          label="选择会员"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-space >
            <a-input-search
              v-model="value"
              placeholder="请输入手机号或者会员卡号"
              enter-button
              @change="handleChange"
              @search="onSearch"
            />
            <a-input v-show="false" v-decorator="['memId']"/>
            <a-button type="primary" v-if="JSON.stringify(this.memberDetail) !== '{}'" @click="cancel">取消</a-button>
          </a-space>
        </a-form-item>
        <a-form-item
          label="会员详情"
          v-if="JSON.stringify(this.memberDetail) !== '{}'"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-descriptions>
            <a-descriptions-item label="会员名称" :span="3">{{ memberDetail.name }}</a-descriptions-item>
            <a-descriptions-item label="会员电话" :span="3">{{ memberDetail.phone }}</a-descriptions-item>
            <a-descriptions-item label="会员卡号" :span="3">{{ memberDetail.cardNo }}</a-descriptions-item>
            <a-descriptions-item label="会员积分" :span="3">{{ memberDetail.hisBigintegral }}</a-descriptions-item>
          </a-descriptions>
        </a-form-item>
        <a-form-item
          label="金额"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-input addonAfter="元" placeholder="请输入金额" v-decorator="['amount', { rules: [{ required: true, message: '请输入金额' }]}]" />
        </a-form-item>
        <a-form-item
          label="记账日期"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-date-picker v-decorator="['orderDate',{ initialValue:this.toDays,}]" style="width: 100%" valueFormat="YYYY-MM-DD"/>
        </a-form-item>
        <a-form-item
          label="备注"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-textarea rows="2" v-decorator="['memo']" placeholder="请输入备注" />
        </a-form-item>
        <a-divider />
        <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
          <a-button htmlType="submit" type="primary" :loading="loading" icon="check">保存</a-button>
          
        </a-form-item>
      </a-form>
      <a-form @submit="handleTykfSubmit" :form="tyfkForm" v-if="operationActiveTabKey == '3'">
        <a-form-item
          label="选择会员"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-space>
            <a-input-search
              v-model="value"
              placeholder="请输入手机号或者会员卡号"
              enter-button
              @change="handleChange"
              @search="onSearch"
            />
            <a-input v-show="false" v-decorator="['memId']"/>
            <a-button type="primary" v-if="JSON.stringify(this.memberDetail) !== '{}'" @click="cancel">取消</a-button>
          </a-space>
        </a-form-item>
        <a-form-item
          label="会员详情"
          v-if="JSON.stringify(this.memberDetail) !== '{}'"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-descriptions>
            <a-descriptions-item label="会员名称" :span="3">{{ memberDetail.name }}</a-descriptions-item>
            <a-descriptions-item label="会员电话" :span="3">{{ memberDetail.phone }}</a-descriptions-item>
            <a-descriptions-item label="会员卡号" :span="3">{{ memberDetail.cardNo }}</a-descriptions-item>
            <a-descriptions-item label="会员积分" :span="3">{{ memberDetail.hisBigintegral }}</a-descriptions-item>
          </a-descriptions>
        </a-form-item>
        <a-form-item
          label="金额"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-input addonAfter="元" placeholder="请输入金额" v-decorator="['amount', { rules: [{ required: true, message: '请输入金额' }]}]" />
        </a-form-item>
        <a-form-item
          label="记账账户"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-select v-decorator="['stAccountId']" placeholder="请选择">
            <a-select-option :value="i.id" v-for="i in option" :key="i.id">{{ i.accName }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="记账日期"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-date-picker v-decorator="['orderDate',{ initialValue:this.toDays,}]" style="width: 100%" valueFormat="YYYY-MM-DD"/>
        </a-form-item>
        <a-form-item
          label="备注"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-textarea rows="2" v-decorator="['memo']" placeholder="请输入备注" />
        </a-form-item>
        <a-divider />
        <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
          <a-button htmlType="submit" type="primary" :loading="loading" icon="check">保存</a-button>
          
        </a-form-item>
      </a-form>
    </a-card>
    <add-member
      ref="addMemberModal"
      :visible="addMemberVisible"
      :loading="addMemberLoading"
      :model="addMemberMdl"
      @cancel="handleAddMemberCancel"
      @ok="handleAddMemberOk"
    />
  </page-header-wrapper>
</template>
  
<script>
import { addAccRecordUsingPOST,getStAccountListUsingGET } from '@/api/api/qiantaizhangwu.ts'
import { getIncomeExpensesTypeListUsingPOST } from '@/api/api/xitongguanli.ts'
import addMember from './addMember'
import moment from 'moment'
import {getMemberByNumberUsingGET,addMemberUsingPOST} from '@/api/api/huiyuanguanli.ts'
export default {
  name: 'CreateFinanceIncomeShopIndex',
  components: {
    addMember,
  },
  data() {
    return {
      toDays: moment().format('YYYY-MM-DD'),
      form: this.$form.createForm(this),
      zcForm: this.$form.createForm(this),
      syfkForm: this.$form.createForm(this),
      tyfkForm: this.$form.createForm(this),
      addMemberMdl:null,
      addMemberVisible:false,
      addMemberLoading:false,
      expensesTypeList:[],
      incomeTypeList:[],
      loading: false,
      option: [],
      value:'',
      operationTabList: [
        { key: '1', tab: '新增收入' },
        { key: '0', tab: '新增支出' },
        { key: '2', tab: '收预付款' },
        { key: '3', tab: '退预付款' },
      ],
      operationActiveTabKey: '0',
      memberDetail:{},
      list: [
        {
          accType: '',
          stAccountId: '',
          amount: this.$route.query.amount,
          orderId: this.$route.params.id,
        },
      ],
      amount: '',
      queryParam: {
        pageNo: 1,
        pageSize: 999,
        queryCondition: '',
        status: 1,
      },
    }
  },
  mounted() {
    this.getExpensesList()
    this.getAccountOption()
  },
  methods: {
    getAccountOption(){
        getStAccountListUsingGET(this.queryParam).then((res) => {
          this.option = res.data.list
        })
        .catch((error) => {
          this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
        })
      },
    getIncomeList(){
      getIncomeExpensesTypeListUsingPOST({...this.queryParam,type:1})
        .then((res) => {
          this.incomeTypeList = res.data.list
        })
        .catch((error) => {
          this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
        })
    },
    getExpensesList(){
      getIncomeExpensesTypeListUsingPOST({...this.queryParam,type:0})
        .then((res) => {
          this.expensesTypeList = res.data.list
        })
        .catch((error) => {
          this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
        })
    },
    handAddMember(){
      this.addMemberVisible = true
      this.addMemberLoading = false
    },
    handleAddMemberOk(){
      const form = this.$refs.addMemberModal.form
      form.validateFields((err, values) => {
        if (!err) {
          addMemberUsingPOST({...values})
            .then((res) => {
              this.$message.success('操作成功')
              // 重置表单数据
              form.resetFields()
              this.addMemberVisible = false
              this.addMemberLoading = false
            })
            .catch((error) => {
              this.addMemberLoading = false
              this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
            })
        }
      })
    },
    handleAddMemberCancel(){
      this.addMemberVisible = false
      const form = this.$refs.addMemberModal.form
      form.resetFields() // 清理表单数据（可不做）
    },
    cancel(){
      this.memberDetail = {}
    },
    onSearch(value) {
      if(!value){
        this.$message.warn('请输入正确的手机号或会员卡号')
      }
      this.handleMember(value)
    },
    handleChange(e) {
      this.value = e.target.value
    },
    handleMember(params) {
      getMemberByNumberUsingGET({
        number: params,
      })
        .then((res) => {
          if(res.data){
            this.memberDetail = res.data
            if(this.operationActiveTabKey == '0'){
              this.form.setFieldsValue({memId:res.data.id})
            }else if(this.operationActiveTabKey == '2'){
              this.syfkForm.setFieldsValue({memId:res.data.id})
            }else if(this.operationActiveTabKey == '3'){
              this.tyfkForm.setFieldsValue({memId:res.data.id})
            }
          }else{
            this.memberDetail = {}
          }
        })
        .catch((error) => {
          this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
        })
    },
    handleSubmit(e) {
      e.preventDefault()
      this.loading = true
      this.form.validateFields((err, values) => {
        if (!err) {
          addAccRecordUsingPOST({...values,payType:this.operationActiveTabKey,storeId:this.$route.params.id})
            .then((res) => {
              this.loading = false
              this.$message.success('操作成功')
              this.$router.push({ path: `/cashier/createFinanceIncomeShop/order/${res.data.id}` })
              // 重置表单数据
              this.form.resetFields()
            })
            .catch((error) => {
              this.loading = false
              this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
            })
        }
      })
    },
    handleZcSubmit(e) {
      e.preventDefault()
      this.loading = true
      this.zcForm.validateFields((err, values) => {
        if (!err) {
          addAccRecordUsingPOST({...values,payType:this.operationActiveTabKey,storeId:this.$route.params.id})
            .then((res) => {
              this.loading = false
              this.$message.success('操作成功')
              this.$router.push({ path: `/cashier/createFinanceIncomeShop/order/${res.data.id}` })
              // 重置表单数据
              this.form.resetFields()
            })
            .catch((error) => {
              this.loading = false
              this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
            })
        }
      })
    },
    handleSykfSubmit(e) {
      e.preventDefault()
      this.loading = true
      this.syfkForm.validateFields((err, values) => {
        if (!err) {
          addAccRecordUsingPOST({...values,payType:this.operationActiveTabKey,storeId:this.$route.params.id})
            .then((res) => {
              this.loading = false
              this.$message.success('操作成功')
              this.$router.push({ path: `/cashier/createFinanceIncomeShop/order/${res.data.id}` })
              // 重置表单数据
              this.form.resetFields()
            })
            .catch((error) => {
              this.loading = false
              this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
            })
        }
      })
    },
    handleTykfSubmit(e) {
      e.preventDefault()
      this.loading = true
      this.tykfForm.validateFields((err, values) => {
        if (!err) {
          addAccRecordUsingPOST({...values,payType:this.operationActiveTabKey,storeId:this.$route.params.id})
            .then((res) => {
              this.loading = false
              this.$message.success('操作成功')
              if(this.operationActiveTabKey == 0 || this.operationActiveTabKey == 2){
                this.$router.push({ path: `/cashier/createFinanceIncomeShop/order/${res.data.id}` })
              }else{
                this.$router.push({ path: `/cashier/paymentRecord/detail/${res.data.id}` })
              }
              // 重置表单数据
              this.form.resetFields()
            })
            .catch((error) => {
              this.loading = false
              this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
            })
        }
      })
    },
  },
}
</script>
  